<template>
  <div class="layout-wrapper">
    <div class="layout-header">
      <div class="header-logo">
        <img src="http://localhost:3000/download?fileId=597707f3853ad121c435b699" width="50" height="50" @click="nav({name: 'index'})"/>
      </div>
      <ul class="header-nav">
        <li @click="showWin('isLoginWin')">登录</li>
        <li>|</li>
        <li @click="showWin('isRegisterWin')">注册</li>
        <li>|</li>
        <li @click="showWin('isAboutWin')">关于</li>
      </ul>
    </div>
    <div class="layout-content">
      <router-view></router-view>
    </div>
    <div class="layout-footer">
      <span>&copy 2017 ZP</span>
    </div>
    <v-dialog :isShow="wins.isLoginWin" @on-close="hideWin('isLoginWin')">
      <v-loginfrm></v-loginfrm>
    </v-dialog>
    <v-dialog :isShow="wins.isRegisterWin" @on-close="hideWin('isRegisterWin')">
      <v-registerfrm></v-registerfrm>
    </v-dialog>
    <v-dialog :isShow="wins.isAboutWin" @on-close="hideWin('isAboutWin')">
      <p>
        难以忘记初次见你
        一双迷人的眼睛
        在我脑海里
        你的身影
        挥散不去
        握你的双手感觉你的温柔
        真的有点透不过气
        你的天真
        我想珍惜
        看到你受委屈
        我会伤心
        只怕我自己会爱上你
      </p>
    </v-dialog>
  </div>
</template>
<script>
  import dialog from '@/components/base/dialog';
  import loginFrm from '@/components/loginform/loginform';
  import registerFrm from '@/components/registerform/registerform';
  export default{
    data () {
      return {
        wins: {
          isLoginWin: false,
          isAboutWin: false,
          isRegisterWin: false
        }
      };
    },
    methods: {
      showWin (win) {
        this.wins[win] = true;
      },
      hideWin (win) {
        this.wins[win] = false;
      },
      nav (to) {
        this.$router.push(to);
      }
    },
    components: {
      'v-dialog': dialog,
      'v-loginfrm': loginFrm,
      'v-registerfrm': registerFrm
    }
  }
</script>
<style scoped>
  .layout-wrapper{
    height: 100%;
    font-size: 15px;
  }
  .layout-wrapper>
  .layout-header{
    height: 90px;
    text-align: left;
    background-color: rgba(54, 54, 54, 1);
    overflow: hidden;
  }
  .layout-wrapper>
  .layout-header>
  .header-logo{
    display: inline-block;
    width: 50px;
    margin-top: 20px;
    margin-left: 40px;
  }

  .layout-wrapper>
  .layout-header>
  .header-nav{
    float: right;
    margin-top: 38px;
    margin-right: 10px;
  }

  .layout-wrapper>
  .layout-header>
  .header-nav>li{
    display: inline-block;
    color: rgba(178, 178, 178, 1);
  }

  .layout-wrapper>
  .layout-header>
  .header-nav>li:nth-child(2n+1){
    cursor: pointer;
  }

  .layout-wrapper>
  .layout-content{
    min-height: 80%;
    background-color: rgba(240, 242, 245, 1);
  }
  .layout-wrapper>
  .layout-footer{
    line-height: 80px;
    background-color: rgba(227, 228, 232, 1);
  }
</style>
